module.exports = function ($resource, $state, $http, $q, toaster, $modal) {
	return {
		scope: {
            linename: '=',
            xaxis: '=',
            data: '=',
            setting: '='
        },
        restrict: 'E',
        template: '<div></div>',
        replace: true,
		link: function (scope, element, attrs){
            
            var myChart = echarts.init(element[0]);

			var option = {
                tooltip: scope.setting.tooltip,
                grid: {
                    left: '1%',
                    right: '4%',
                    bottom: '1%',
                    top: '2%',
                    containLabel: true
                },
                legend: {
                    data: scope.linename,
                    orient: 'vertical',
                    top: '5px',
                    x: 'right'
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: scope.setting.boundaryGap,
                    data: scope.xaxis
                }],
                yAxis: [{
                    type: 'value'
                }],
                color: ['#7266ba', '#23b7e5']
            };

            scope.$watch('xaxis', function(newValue, oldValue){
                option.xAxis[0].data = scope.xaxis;
                myChart.setOption(option);
            }, true);
            
            scope.$watch('data', function(newValue, oldValue){
                option.series = function(){
                    var serie = [
                        {'name': scope.linename[0], 'type': scope.setting.serietype, 'data': scope.data[0]},
                        {'name': scope.linename[1], 'type': scope.setting.serietype, 'data': scope.data[1]}
                    ];
                    return serie;  
                }();
                myChart.setOption(option);
            }, true);

		}
	};
};

